<template>
  <a-drawer v-model:visible="visible" title="NVR信息编辑" placement="right" :width="450">
    <a-form ref="form" :model="model" :rules="rules" :label-col="{ span: 6 }" @finish="onFinish">
      <a-form-item label="录像机名称" name="name">
        <a-input v-model:value="model.name" allowClear placeholder="请输入录像机名称" :maxlength="50" />
      </a-form-item>
      <a-form-item label="站点编码" name="stationCode">
        <!-- <StationSelect v-model:value="model.stationCode" /> -->
        <a-select v-model:value="model.stationCode" placeholder="请选择站点编码" allowClear>
          <template v-for="(vo, index) in stationList" :key="index">
            <a-select-option :value="vo.stationCode">
              {{ vo.name }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="公网IP" name="globalIp">
        <a-input v-model:value="model.globalIp" placeholder="请输入公网IP" />
      </a-form-item>
      <a-form-item label="公网端口" name="globalPort">
        <a-input v-model:value="model.globalPort" allowClear placeholder="请输入公网端口" />
      </a-form-item>
      <a-form-item label="内网IP" name="inIp">
        <a-input v-model:value="model.inIp" allowClear placeholder="请输入内网IP" />
      </a-form-item>
      <a-form-item label="内网端口" name="inPort">
        <a-input v-model:value="model.inPort" allowClear placeholder="请输入内网端口" />
      </a-form-item>
      <a-form-item label="NVR账号" name="nvrAccount">
        <a-input v-model:value="model.nvrAccount" allowClear placeholder="请输入NVR账号" />
      </a-form-item>
      <a-form-item label="NVR密码" name="nvrPassword">
        <a-input v-model:value="model.nvrPassword" allowClear placeholder="请输入NVR密码" />
      </a-form-item>
      <a-form-item label="NVR编码" name="nvrCode">
        <a-input v-model:value="model.nvrCode" allowClear placeholder="请输入nvr编码" :maxlength="50" />
      </a-form-item>
      <a-form-item label="操作">
        <a-button @click="resetForm">重置</a-button>
        <a-divider type="vertical" />
        <a-button type="primary" html-type="submit">提交保存</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script>
import { watch, ref, nextTick, defineComponent, getCurrentInstance } from 'vue';
import { nvrAddApi, nvrModifyApi, nvrInfoApi } from '@/api/nvr';
import { useUserStore } from '/@/store/modules/user';
import { validateName, validateNvrAccount, validateNvrCode, validateNvrPassword, validateIP, validatePort } from './validate';
import { StationSelect } from '/@/components/StationSelect';
export default defineComponent({
  components: { StationSelect },
  emits: ['oks'],
  setup(props, { emit }) {
    let { proxy } = getCurrentInstance();

    const userStore = useUserStore();

    let visible = ref(false);

    let model = ref({
      // 名称
      name: '',
      // 公网IP
      globalIp: '',
      // 公网端口
      globalPort: '',
      // 内网IP
      inIp: '',
      // 内网端口
      inPort: '',
      // nvr账号
      nvrAccount: '',
      // nvr编码
      nvrCode: '',
      // nvr密码
      nvrPassword: '',
      // 站点编码
      stationCode: '',
    });

    let rules = ref({
      name: [{ required: true, message: '请输入录像机名称' }],
      globalIp: [{ required: true, validator: validateIP, trigger: 'change' }],
      globalPort: [{ required: true, validator: validatePort, trigger: 'change' }],
      inIp: [{ required: true, validator: validateIP, trigger: 'change' }],
      inPort: [{ required: true, validator: validatePort, trigger: 'change' }],
      nvrAccount: [{ required: true, validator: validateNvrAccount, trigger: 'change' }],
      nvrPassword: [{ required: true, validator: validateNvrPassword, trigger: 'change' }],
      nvrCode: [{ required: true, validator: validateNvrCode, trigger: 'change' }],
      stationCode: [{ required: true, message: '请输入站点编码' }],
    });

    // 站点列表
    let stationList = ref(userStore.getStationList);

    /**
     * 初始化NVR基础数据
     */
    function init(id) {
      nvrInfoApi({ id }).then((res) => {
        model.value = res;
      });
    }

    watch(
      () => visible.value,
      (flag) => {
        if (flag) {
        } else {
          delete model.value.id;
          resetForm();
        }
      }
    );

    function onFinish() {
      let data = {
        ...model.value,
      };
      if (!data['id']) {
        nvrAddApi(data)
          .then((res) => {
            console.log(res);
            proxy.$refs.form.resetFields();
            visible.value = false;
            emit('oks');
          })
          .catch((error) => {});
      } else {
        nvrModifyApi(data).then((res) => {
          proxy.$refs.form.resetFields();
          visible.value = false;
          emit('oks');
        });
      }
    }

    function resetForm() {
      proxy.$refs.form.resetFields();
    }

    return {
      visible,
      model,
      rules,
      stationList,
      init,
      onFinish,
      resetForm,
    };
  },
});
</script>